<template>
  <div class="packing-execution-container">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <template #header>
            <span style="font-weight: bold; font-size: 16px">装箱执行</span>
          </template>
          <div class="addBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-form style="margin-top: 40px" label-width="120">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="装箱单编号">
                      <el-input
                        v-model="form.packingNo"
                        disabled
                        style="width: 300px"
                      />
                      <el-switch
                        v-model="form.isSystemNo"
                        active-text="系统编号"
                        class="switch-style"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="装箱单名称">
                      <el-input
                        v-model="form.packingName"
                        style="width: 300px"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="装箱日期">
                      <el-date-picker
                        v-model="form.packingDate"
                        type="date"
                        style="width: 300px"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="订单编号(销售)">
                      <el-input v-model="form.orderNo" style="width: 300px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="客户名称">
                      <el-input
                        v-model="form.customerName"
                        style="width: 300px"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户编号">
                      <el-input
                        v-model="form.customerNo"
                        style="width: 300px"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="备注">
                  <el-input
                    v-model="form.remark"
                    type="textarea"
                    style="width: 795px"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div class="bomContainer">
              <div class="bomInfoContainer">
                <div class="milestone">
                  <div class="milestone-content">装箱信息</div>
                </div>
                <el-form style="margin-top: 40px" label-width="120">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="箱子长度(CM)">
                        <el-input-number
                          v-model="form.boxLength"
                          :min="0"
                          :controls="false"
                          style="width: 300px"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="箱子宽度(CM)">
                        <el-input-number
                          v-model="form.boxWidth"
                          :min="0"
                          :controls="false"
                          style="width: 300px"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="箱子高度(CM)">
                        <el-input-number
                          v-model="form.boxHeight"
                          :min="0"
                          :controls="false"
                          style="width: 300px"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="净重(KG)">
                        <el-input-number
                          v-model="form.netWeight"
                          :min="0"
                          :controls="false"
                          style="width: 300px"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="毛重(KG)">
                        <el-input-number
                          v-model="form.grossWeight"
                          :min="0"
                          :controls="false"
                          style="width: 300px"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="包含子箱">
                        <el-switch
                          v-model="form.hasSubBox"
                          class="switch-style"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
            <div class="childInfoContainer">
              <div class="milestone">
                <div class="milestone-content">子籍信息</div>
              </div>
              <div class="buttonGroup" style="margin-top: 40px">
                <el-button type="primary" style="width: 80px">添加</el-button>
                <el-button type="primary" plain style="width: 80px"
                  >移除</el-button
                >
              </div>
              <el-table :data="subBoxes" style="margin-top: 20px" border>
                <el-table-column type="selection" align="center" fixed="left">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="装箱单编号"
                  align="center"
                  width="100"
                  fixed="left"
                >
                </el-table-column>
                <el-table-column
                  label="装箱单名称"
                  align="center"
                  width="100"
                  fixed="left"
                >
                </el-table-column>
                <el-table-column label="装箱日期" align="center" width="90">
                </el-table-column>
                <el-table-column
                  label="订单编号(销售)"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column label="客户名称" align="center" width="90">
                </el-table-column>
                <el-table-column label="客户编号" align="center" width="90">
                </el-table-column>
                <el-table-column
                  label="箱子长度(CM)"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  label="箱子宽度(CM)"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  label="箱子高度(CM)"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column label="净重(KG)" align="center" width="100">
                </el-table-column>
                <el-table-column label="毛重(KG)" align="center" width="100">
                </el-table-column>
                <el-table-column label="备注" align="center" width="200">
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="100"
                  fixed="right"
                >
                  <template #default>
                    <el-button link type="primary">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="boxInfoContainer">
              <div class="milestone">
                <div class="milestone-content">装箱清单</div>
              </div>
              <div class="buttonGroup" style="margin-top: 40px">
                <el-button type="primary" style="width: 80px" plain
                  >添加</el-button
                >
                <el-button type="primary" style="width: 80px">移除</el-button>
              </div>
              <el-table border style="margin-top: 20px" :data="packingItems">
                <el-table-column
                  type="selection"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  type="index"
                  align="center"
                  label="序号"
                  width="60"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="产品编号"
                  align="center"
                  width="90"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="产品名称"
                  align="center"
                  width="90"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="规格型号"
                  align="center"
                  width="90"
                ></el-table-column>
                <el-table-column
                  label="产品类型"
                  align="center"
                  width="90"
                ></el-table-column>
                <el-table-column label="单位" align="center"></el-table-column>
                <el-table-column
                  label="工单编号"
                  align="center"
                  width="90"
                ></el-table-column>
                <el-table-column
                  label="工单名称"
                  align="center"
                  width="90"
                ></el-table-column>
                <el-table-column
                  label="批次号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="有效期"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="装箱数量"
                  align="center"
                  width="90"
                ></el-table-column>
                <el-table-column
                  label="备注"
                  align="center"
                  width="200"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="100"
                  fixed="right"
                >
                  <template #default>
                    <el-button link type="primary">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
        <el-button type="primary" style="width: 80px" @click="submitPacking"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";

// 顶部信息
const creator = ref("李小海");
const createTime = ref("2025-06-26 11:59:37");
const updater = ref("李小海");
const updateTime = ref("2025-06-26 11:59:37");
const status = ref("装箱中");
const $router = useRouter();
const isFooterVisible = ref(false);

// 表单数据
const form = ref({
  packingNo: "ZXD21222025062611593798",
  isSystemNo: true,
  packingName: "非常有用的产品装箱单",
  packingDate: "2023-04-19",
  orderNo: "XSDD012909458390",
  customerName: "重要大客户",
  customerNo: "KHBH0235",
  remark: "",
  boxLength: 500,
  boxWidth: 200,
  boxHeight: 600,
  netWeight: 50,
  grossWeight: 46,
  hasSubBox: true,
});

// 子箱数据
const subBoxes = ref([
  {
    index: 1,
    packingName: "产品30装箱",
    packingNo: "ZXDH0215",
    packingDate: "2025-06-26",
    orderNo: "XSDD932497",
    customerName: "客户933",
    customerNo: "KHBH55555",
    boxLength: 500,
    boxWidth: 200,
    boxHeight: 600,
    netWeight: 50,
    grossWeight: 45,
    hasSubBox: false,
    remark: "",
  },
  {
    index: 2,
    packingName: "产品30装箱",
    packingNo: "ZXDH0215",
    packingDate: "2025-06-26",
    orderNo: "XSDD932497",
    customerName: "客户933",
    customerNo: "KHBH55555",
    boxLength: 500,
    boxWidth: 200,
    boxHeight: 600,
    netWeight: 50,
    grossWeight: 45,
    hasSubBox: false,
    remark: "",
  },
  {
    index: 3,
    packingName: "产品30装箱",
    packingNo: "ZXDH0215",
    packingDate: "2025-06-26",
    orderNo: "XSDD932497",
    customerName: "客户933",
    customerNo: "KHBH55555",
    boxLength: 500,
    boxWidth: 200,
    boxHeight: 600,
    netWeight: 50,
    grossWeight: 45,
    hasSubBox: false,
    remark: "",
  },
]);

// 装箱清单数据
const packingItems = ref([
  {
    index: 1,
    productNo: "CPBH9UU",
    productName: "产品2333",
    specification: "50 * 50 * 30",
    productType: "kg",
    unit: "50",
    workOrderNo: "GDBH156",
    workOrderName: "产品1生产工单",
    batchNo: "203164897",
    expiryDate: "2026-01-12",
    quantity: "",
    remark: "",
  },
  {
    index: 2,
    productNo: "CPBH9UU",
    productName: "产品2333",
    specification: "50 * 50 * 30",
    productType: "kg",
    unit: "50",
    workOrderNo: "GDBH156",
    workOrderName: "产品1生产工单",
    batchNo: "203164897",
    expiryDate: "2026-01-12",
    quantity: "",
    remark: "",
  },
  {
    index: 3,
    productNo: "CPBH9UU",
    productName: "产品2333",
    specification: "50 * 50 * 30",
    productType: "kg",
    unit: "50",
    workOrderNo: "GDBH156",
    workOrderName: "产品1生产工单",
    batchNo: "203164897",
    expiryDate: "2026-01-12",
    quantity: "",
    remark: "",
  },
]);

// 选择项
const selectedSubBoxes = ref([]);
const selectedPackingItems = ref([]);

// 计算属性
const totalPackingCount = computed(() => {
  return packingItems.value.reduce((total, item) => {
    return total + (Number(item.quantity) || 0);
  }, 0);
});

// 方法
const handleSubBoxSelectionChange = (selection) => {
  selectedSubBoxes.value = selection;
};

const handlePackingItemSelectionChange = (selection) => {
  selectedPackingItems.value = selection;
};

onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
});

const addSubBox = () => {
  const newIndex = subBoxes.value.length + 1;
  subBoxes.value.push({
    index: newIndex,
    packingName: "",
    packingNo: "",
    packingDate: "",
    orderNo: "",
    customerName: "",
    customerNo: "",
    boxLength: null,
    boxWidth: null,
    boxHeight: null,
  });
};

const removeSubBox = () => {
  const selectedIndexes = selectedSubBoxes.value.map((item) => item.index);
  subBoxes.value = subBoxes.value.filter(
    (item) => !selectedIndexes.includes(item.index)
  );
  selectedSubBoxes.value = [];
};

const removeSingleSubBox = (row) => {
  const index = subBoxes.value.findIndex((item) => item.index === row.index);
  if (index !== -1) {
    subBoxes.value.splice(index, 1);
  }
};

const addPackingItem = () => {
  const newIndex = packingItems.value.length + 1;
  packingItems.value.push({
    index: newIndex,
    productNo: "",
    productName: "",
    specification: "",
    productType: "",
    unit: "",
    workOrderNo: "",
    workOrderName: "",
    batchNo: "",
    expiryDate: "",
    quantity: "",
    remark: "",
  });
};

const removePackingItem = () => {
  const selectedIndexes = selectedPackingItems.value.map((item) => item.index);
  packingItems.value = packingItems.value.filter(
    (item) => !selectedIndexes.includes(item.index)
  );
  selectedPackingItems.value = [];
};

const removeSinglePackingItem = (row) => {
  const index = packingItems.value.findIndex(
    (item) => item.index === row.index
  );
  if (index !== -1) {
    packingItems.value.splice(index, 1);
  }
};

const editPacking = () => {
  console.log("编辑装箱单");
};

const deletePacking = () => {
  console.log("删除装箱单");
};

const completePacking = () => {
  status.value = "已完成";
  console.log("完成装箱");
};

const printPacking = () => {
  console.log("打印装箱单");
};

const submitPacking = () => {
  console.log("提交装箱:", form.value, subBoxes.value, packingItems.value);
  // 这里添加实际提交逻辑
  ElMessage.success("装箱单提交成功");
};

const cancelPacking = () => {
  // 取消操作
  ElMessage.info("已取消装箱操作");
};

const close = () => {
  $router.replace("/storage/other/packing");
};
</script>

<style scoped lang="scss">
.packing-execution-container {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .addBody {
    width: 100%;
    .basicInfoContainer,
    .bomInfoContainer,
    .childInfoContainer,
    .boxInfoContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .bomInfoContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>